<template>
	<h1 :class="curClassName" :style="curStyle">{{ curValue }}</h1>
</template>
<script setup lang="ts">
import { PresetTitleProps } from './preset-title';

const props = defineProps(PresetTitleProps);

/**
 * 项名称
 *
 * @memberof AppPresetTitle
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式类
 *
 * @memberof AppPresetTitle
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-preset-title ${itemName.value} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetTitle
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 当前值
 *
 * @memberof AppPresetTitle
 */
const curValue = App.getAppConfig().appTitle;
</script>
